<template>
  <view class="order-detail flexc">
    <view class="flex1 over mb70">
      <view class="header">
        <view class="header-t">搜索提交记录</view>
        <view class="flex-between">
          <view class="">
            <view class="">服务日期：2023-231-213</view>
            <view class="header-des">等待我处理</view>
          </view>
          <image
            class="s-icon"
            src="/static/order/s-icon.png"
            mode="aspectFit"></image>
        </view>
      </view>
      <template v-if="type == 1 || type == 2">
        <view class="wrap">
          <view class="box">
            <view class="">序号</view>
            <view class="box-des">20000000</view>
          </view>
          <view class="box">
            <view class="">服务日期</view>
            <view class="box-des">20000000</view>
          </view>
          <view class="box">
            <view class="">养殖户</view>
            <view class="box-des">20000000</view>
          </view>
          <view class="box">
            <view class="">地址</view>
            <view class="box-des">20000000</view>
          </view>
          <view class="box">
            <view class="">中间商</view>
            <view class="box-des">20000000</view>
          </view>
          <view class="box">
            <view class="">养殖量</view>
            <view class="box-des">20000000</view>
          </view>
          <view class="box">
            <view class="">日龄</view>
            <view class="box-des">20000000</view>
          </view>
          <view class="box">
            <view class="">死淘数</view>
            <view class="box-des">20000000</view>
          </view>
          <view class="box">
            <view class="">余料</view>
            <view class="box-des">20000000</view>
          </view>
          <view class="box">
            <view class="">费用</view>
            <view class="box-des">20000000</view>
          </view>
          <view class="box">
            <view class="">抽样只数</view>
            <view class="box-des">20000000</view>
          </view>
          <view class="box">
            <view class="">重量(kg)</view>
            <view class="box-des">20000000</view>
          </view>
          <view class="box">
            <view class="">均重(kg)</view>
            <view class="box-des">20000000</view>
          </view>
          <view class="box">
            <view class="">健康状态</view>
            <view class="box-des">20000000</view>
          </view>
        </view>
      </template>
      <template v-else>
        <view class="wrap">
          <view class="box">
            <view class="">序号</view>
            <view class="box-des">20000000</view>
          </view>

          <view class="box">
            <view class="">抓鸭日期</view>
            <view class="box-des">20000000</view>
          </view>
          <view class="box">
            <view class="">养殖户</view>
            <view class="box-des">20000000</view>
          </view>
          <view class="box">
            <view class="">地址</view>
            <view class="box-des">20000000</view>
          </view>
          <view class="box">
            <view class="">车牌号</view>
            <view class="box-des">20000000</view>
          </view>
          <view class="box">
            <view class="">队长姓名</view>
            <view class="box-des">20000000</view>
          </view>
          <view class="box">
            <view class="">到达基地时间</view>
            <view class="box-des">20000000</view>
          </view>
          <view class="box">
            <view class="">到达工厂时间</view>
            <view class="box-des">20000000</view>
          </view>
          <view class="box">
            <view class="">生产排序</view>
            <view class="box-des">20000000</view>
          </view>
        </view>
      </template>
      <view class="wrap">
        <view class="box box1">
          <view class="">备注</view>
          <view class="box-des box-des1">20000000</view>
        </view>
      </view>
      <view class="wrap p-mark">
        <view class="t">流程</view>
        <view class="flex p-mark-mb" v-for="(item, index) in list" :key="index">
          <view class="avatar-box">
            <image
              src="/static/demo.jpg"
              mode="aspectFit"
              class="avatar"></image>
            <image
              v-if="item.status == 1"
              src="/static/order/s.png"
              mode="aspectFit"
              class="icon"></image>
            <image
              v-if="item.status == 2"
              src="/static/order/w.png"
              mode="aspectFit"
              class="icon"></image>
            <view class="b-ac" v-if="index < list.length - 1"></view>
          </view>
          <view class="flex1">
            <view class="tip">{{ item.title }}</view>
            <view class="tip-c">{{ item.name }}</view>
          </view>
          <view class="date">{{ item.date }}</view>
        </view>
      </view>
    </view>
    <template v-if="type == 1">
      <view class="footer flex-between">
        <view class="">拒绝</view>
        <view class="" @click="() => (show = true)">同意</view>
      </view>
    </template>
    <template v-if="type == 2 || type == 3">
      <view class="footer1 flex-between">
        <view class="column-flex-center" @click="goPage(1)">
          <view class="edit"></view>
          <view class="">修改</view>
        </view>
        <view class="column-flex-center">
          <view class="edit1"></view>
          <view class="">撤销</view>
        </view>
        <view class="footer1-btn">发起修改审批</view>
      </view>
    </template>
    <!-- 拒绝弹框 -->
    <u-popup :show="show" mode="bottom" round="20">
      <view class="popup-wrap">
        <view class="pop-header" @click="() => (show = false)">
          <image src="/static/order/close.png" mode="aspectFit"></image>
          <text>确认拒绝</text>
        </view>
        <u--textarea
          v-model="mark"
          border="none"
          height="200"
          placeholder="请输入审批意见"></u--textarea>
        <view class="pop-tip">推荐回复</view>
        <view class="flex">
          <view class="pop-box" v-for="(item, index) in markList" :key="index">
            {{ item }}
          </view>
        </view>
        <view class="pop-btn">确定拒绝</view>
      </view>
    </u-popup>
  </view>
</template>

<script>
export default {
  data() {
    return {
      type: 3, //1---订单列表进入 2---养殖生管部进入 3--抓鸭进入
      show: false,
      mark: "", //拒绝弹框中的留言
      list: [
        { title: "11", status: 1, name: "333", date: "2012-21-21" },
        { title: "22", status: 2, name: "444", date: "2012-21-21" },
        { title: "33", status: 2, name: "5555", date: "2012-21-21" },
      ],
      markList: ["拒绝", "不同意", "请核实", "重新提交"],
    };
  },
  methods: {
    goPage(k) {
      //修改
      if (k == 1) {
        this.toRoute("/editRecord");
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.order-detail {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  padding-bottom: env(safe-area-inset-bottom);
  background: #fff;
  ::v-deep .u-popup {
    flex: 0 !important;
  }
  .header {
    padding: 28upx 32upx 38upx;
    font-size: 24rpx;
    color: #8d8d8d;
    background: #ffffff;
    &-t {
      font-weight: bold;
      font-size: 32rpx;
      color: #161616;
      margin-bottom: 20upx;
    }
    .s-icon {
      width: 128upx;
      height: 128upx;
    }
    &-des {
      font-size: 28rpx;
      color: #f17303;
      margin-top: 42upx;
    }
  }

  .mb70 {
    padding-top: 20upx;
    padding-bottom: 70upx;
    background: #f5f7f9;
  }
  .wrap {
    margin-bottom: 20upx;
    padding: 0 32upx;
    background: #fff;
    .box {
      background: #fff;
      padding: 28upx 0;
      border-bottom: 1rpx solid #e4e4e4;
      font-size: 32rpx;
      color: #a0a0a0;
      &-des {
        font-size: 32rpx;
        color: #171717;
        margin-top: 28upx;
      }
    }
    .box1 {
      box-sizing: border-box;
      height: 356upx;
    }
    .box:last-child {
      border-bottom: none;
    }
    .t {
      font-weight: bold;
      font-size: 32rpx;
      color: #161616;
      margin-bottom: 40upx;
    }
    .avatar-box {
      position: relative;
      width: 68upx;
      height: 68upx;
      margin-right: 22upx;
      .avatar {
        width: 100%;
        height: 100%;
      }
      .icon {
        position: absolute;
        bottom: 0;
        right: 0;
        width: 32upx;
        height: 32upx;
      }
    }
    .tip {
      font-size: 28rpx;
      color: #a0a0a0;
      margin-bottom: 14upx;
    }
    .tip-c {
      font-size: 28rpx;
      color: #171717;
    }
    .date {
      font-size: 24rpx;
      color: #a0a0a0;
    }

    .b-ac {
      position: absolute;
      width: 2rpx;
      height: 56rpx;
      background: #d7d7d7;
      bottom: -76upx;
      left: 50%;
      transform: translateX(-50%);
    }
  }
  .p-mark {
    padding: 28upx 32upx 10upx;
    &-mb {
      margin-bottom: 74upx;
    }
    &-mb:last-child {
      margin-bottom: 52upx;
    }
  }
  .footer {
    padding: 8upx 32upx;
    background: #fff;
    box-shadow: 0rpx -8rpx 20rpx 0rpx rgba(0, 0, 0, 0.0588);
    & > view {
      width: 328rpx;
      height: 80rpx;
      background: #f2f1f6;
      border-radius: 42rpx 42rpx 42rpx 42rpx;
      border: 1rpx solid #eaecee;
      text-align: center;
      line-height: 80upx;
      font-size: 28rpx;
      color: #171717;
    }
    & > view:nth-of-type(2) {
      background: #da4334;
      color: #ffffff;
    }
  }
  .footer1 {
    padding: 8upx 32upx 8upx 70upx;
    background: #fff;
    font-size: 24rpx;
    color: #9f9ea3;
    box-shadow: 0rpx -8rpx 20rpx 0rpx rgba(0, 0, 0, 0.0588);
    .edit {
      width: 37upx;
      height: 37upx;
      margin-bottom: 10upx;
    }
    .edit1 {
      width: 35rpx;
      height: 37rpx;
      margin-bottom: 12upx;
    }
    &-btn {
      width: 372rpx;
      height: 80rpx;
      background: #da4334;
      border-radius: 422rpx 422rpx 422rpx 422rpx;
      border: 1rpx solid #dafbff;
      text-align: center;
      line-height: 80upx;
      font-size: 28rpx;
      color: #ffffff;
    }
  }
  .popup-wrap {
    padding: 34upx 32upx 0;
    width: 100%;
    box-sizing: border-box;
    .pop-header {
      position: relative;
      font-weight: bold;
      text-align: center;
      font-size: 28rpx;
      color: #181818;
      margin-bottom: 20upx;
      & > image {
        position: absolute;
        width: 32upx;
        height: 32upx;
        left: 30upx;
        top: 50%;
        transform: translateY(-50%);
      }
    }
    .pop-tip {
      font-size: 26rpx;
      color: #737373;
      margin-bottom: 24upx;
      margin-top: 20upx;
    }
    .pop-box {
      padding: 12upx 20upx;
      background: #eaebed;
      border-radius: 6rpx 6rpx 6rpx 6rpx;
      font-size: 26rpx;
      color: #191919;
      margin-right: 18upx;
    }
    .pop-btn {
      height: 80rpx;
      background: #da4334;
      border-radius: 42rpx 42rpx 42rpx 42rpx;
      line-height: 80upx;
      text-align: center;
      margin-top: 106upx;
      font-size: 28rpx;
      color: #ffffff;
    }
  }
}
</style>
